<template>
  <div class="page_container">
    <PageTitle />

    <div class="search_part">
      <div class="left">
        <div class="item">
          <span>状态：</span>
          <el-select v-model="searchKey.state" placeholder="请选择状态" @change="getPagingList(1)">
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span>文章类型：</span>
          <el-select v-model="searchKey.type" placeholder="请选择文章类型" @change="getPagingList(1)">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span>文章标题/文章来源：</span>
          <el-input v-model="searchKey.keywords" placeholder="请输入文章标题/文章来源" style="width: 240px;" clearable></el-input>
          <el-button @click="getPagingList(1)" type="primary" round>
            搜索
          </el-button>
        </div>
      </div>
      <div class="right">
        <el-button
          v-if="isBtnPermission('InformationArticleAdd')"
          @click="$router.push({name:'InformationArticleAdd'})"
          type="primary"
          round
        >
          新增
        </el-button>
      </div>
    </div>
    <!-- pagingList -->
    <TableScroll :data="[{id:1, stateObj:{id:1}}]">
      <el-table-column label="文章类型" prop="typeName" align="center" show-overflow-tooltip />
      <el-table-column label="文章标题" prop="title" align="center" show-overflow-tooltip />
      <el-table-column label="文章来源" prop="source" align="center" show-overflow-tooltip />
      <el-table-column label="发布时间" prop="createDate" align="center" show-overflow-tooltip />
      <el-table-column label="状态" align="center" width="80px" show-overflow-tooltip>
        <template slot-scope="{row}">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="row.stateObj.id"
            @change="changeState(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        :width="tableActionWidth(actionBtns)"
        fixed="right"
        v-if="tableActionWidth(actionBtns)"
      >
        <template slot-scope="{row}">
          <el-button
            v-if="isBtnPermission('InformationArticleDetail')"
            @click="$router.push({name:'InformationArticleDetail', params: {id: row.id}})"
            type="success"
            round
          >
            查看
          </el-button>
          <el-button
            v-if="isBtnPermission('InformationArticleEdit')"
            @click="$router.push({name:'InformationArticleEdit', params: {id: row.id, pages: {InformationArticle: index}}})"
            type="warning"
            round
          >
            修改
          </el-button>
          <el-button
            v-if="isBtnPermission('InformationArticleDelete')"
            @click="del(row)"
            type="danger"
            round
          >
            删除
          </el-button>
        </template>
      </el-table-column>

      <template #pagination>
        <Pagination
          :page="index"
          :limit="size"
          :total="totalSize"
          @pagination="handlePagination"
          :hidden="!pagingList.length"
        />
      </template>
    </TableScroll>
  </div>
</template>

<script>
import {
  getInformationArticleList,
  editInformationArticleState,
  deleteInformationArticle,
} from '@/api/home/information/informationArticle.js';
import paging from '@m/paging.js';

export default {
  name: 'InformationArticle',
  mixins: [paging],
  data() {
    return {
      pageName: 'InformationArticle',
      actionBtns: ['InformationArticleDetail', 'InformationArticleEdit', 'InformationArticleDelete'],
      typeList: [{ id: 0, name: '全部' }],
      stateList: [{ id: 0, name: '全部' }],
      searchKey: {
        keywords: '',
        type: 0,
        state: 0,
      },
      listFn: getInformationArticleList,
      stateFn: editInformationArticleState,
      delFn: deleteInformationArticle,
      delMessage: {
        title: '删除确认',
        msg: '确定删除该资讯文章吗?',
      },
    };
  },
  created() {
    this.getEnums();
  },
  activated() {
    this.$store.commit('layout/initManuallyRefresh', async() => {
      this.getEnums();
    });
  },
  methods: {
    getEnums() {
      this.$store.dispatch('enums/getEnum', { // 文章类型
        id: 1,
        value: this.searchKey.type,
        callback: (res, isDel) => {
          if (isDel) {
            this.searchKey.type = 0;
          }
          res.unshift({
            id: 0,
            name: '全部',
          });
          this.typeList = res;
        }
      });
      this.$store.dispatch('enums/getEnum', { // 文章状态
        id: 1,
        value: this.searchKey.state,
        callback: (res, isDel) => {
          if (isDel) {
            this.searchKey.state = 0;
          }
          res.unshift({
            id: 0,
            name: '全部',
          });
          this.stateList = res;
        }
      });
    },
  },
  components: {
    Pagination: () => import('@c/Pagination'),
  }
};
</script>
<style lang="scss" scoped>

</style>
